<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>影院后台管理系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style type="text/css">
.main {
	width: 100%;
	height: 550px;
}

.main1 {
	width: 900px;
	height: 550px;
	text-align:center;
	border: #DCDCDC 1px dashed;
	margin: 18px 20px 0px 20px;
	float: left;
	position: relative;
}

.main2 {
	float: left;
	width: 200px;
	height: 550px;
	border: #DCDCDC 1px dashed;
	margin: 18px 0px 0px 0px;
}

.screen-center {
	width:60px;
	height:20px;
	line-height:22px;
	padding: 5px;
	font-size: 13px;
	border-radius: 5px;
	top: 50px;
	background-color: #f6f6f6;
	color: #636363;
	border: 1px solid #b1b1b1;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.screen {
	width: 550px;
	padding-top: 50px;
	text-align: center;
	font-size: 16px;
	color: #666;
	background: url(images/screen.png) no-repeat;
	background-position-x: center;
	position: relative;
	margin: 0 auto;
}

ul {
	padding: 0px;
	list-style: none;
	/*去掉ul样式*/
}

/*椅子的样式*/
ul li img {
	height: 26.5px;
	/*位置宽高*/
	width: 26.5px;
	margin: 3px 3px;
}

#seats {
	width: 100%;
	margin: auto;
	text-align: center;
}

#seats ul li {
	float: none;
	display: inline;
	zoom: 1;
	text-align: center;
	list-style: none;
}

.cline {
	width: 2px;
	height: 448px;
	border-left: 1px dashed #666666;
 	position: absolute;
	top: 100px;
	bottom: 0;
	z-index: 99999;
	margin-left: 450px;
}

.number {
	position: absolute;
	left: 10px;
	top: 120px;
	border-radius: 10px;
	background-color: #e3e3e3;
	color: white;
	font-weight: 600;
	width: 23px;
	height: 421px;
	font-size: 15px;
	line-height: 32px;
	text-align: center;
}
</style>
</head>
<body>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">酒店后台管理系统</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
				</a>
					<dl class="layui-nav-child">
						<!-- <dd><a href="">消息<span class="layui-badge">99+</span></a></dd> -->
					</dl></li>
				<li class="layui-nav-item"><a href="logout">退了</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
						<ul class="layui-nav layui-nav-tree" lay-filter="test">
     					   <li class="layui-nav-item layui-nav-itemed">
					          <a  href="movieSystem.html">主页(统计信息)</a>
					        </li>
					       <li class="layui-nav-item">
					          <a href="businessManagement.html">营业管理</a>
					        </li>
							<li class="layui-nav-item  layui-nav-itemed"><a href="javascript:;">影院管理</a>
								<dl class="layui-nav-child">
					          	<dd><a href="moiveinfo.html">总影院详情</a></dd>
					            <dd><a href="mymoivesystem.html">分影院管理</a></dd>
					            <dd><a href="halllist.html">影厅管理</a></dd>
					            <dd><a href="movies.html">影片管理</a></dd>
								<dd class="layui-this"><a href="hall.html">添加影厅</a></dd>
								<dd><a href="arrange.html">排片</a></dd>
					        	<dd><a href="uploadvideo.html">上传影片</a></dd>
					          </dl>
							</li>
							<li class="layui-nav-item"><a href="feedback.html">信息反馈</a></li>
						</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<input type="hidden" id="userName" value="后台">
			<div class="main">
				<div class="main1">
					<div class="screen"></div>
					<div class="screen-center">银幕中央</div>
					<div class="cline"></div>
					<div class="number">
						1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13
					</div>
					</br>
					<div id="seats"></div>
				</div>
				<div class="main2">
					<div
						style="border-bottom: #DCDCDC 1px dashed; width: 100%; height: 60px; font-size: 25px; text-align: center; line-height: 60px; font-family: '黑体';">
						添加影厅</div>
					<div
						style="border-bottom: #DCDCDC 1px dashed; width: 100%; height: 180px;">
						<form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">
								<br> <label class="layui-form-label"
									style="width: 60px; margin-top: 10px; margin-left: 15px;">行数</label>
								<div class="layui-input-inline"
									style="width: 60px; margin-top: 10px;">
									<select name="row" id="row">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>
										<option value="11">11</option>
										<option value="12">12</option>
										<option value="13" selected="selected">13</option>
									</select>
								</div>
								<label class="layui-form-label"
									style="width: 60px; margin-top: 8px; margin-left: 15px;">列数</label>
								<div class="layui-input-inline"
									style="width: 60px; margin-top: 8px;">
									<select name="col" id="col">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>
										<option value="11">11</option>
										<option value="12">12</option>
										<option value="13">13</option>
										<option value="14">14</option>
										<option value="15">15</option>
										<option value="16">16</option>
										<option value="17">17</option>
										<option value="18">18</option>
										<option value="19">19</option>
										<option value="20">20</option>
										<option value="21">21</option>
										<option value="22">22</option>
										<option value="23">23</option>
										<option value="24">24</option>
										<option value="25" selected="selected">25</option>
									</select>
								</div>
							</div>
						</form>
						<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>座位：<img
							src="images/unselected.png" />&nbsp;&nbsp;&nbsp;&nbsp;过道：
						</b><img src="images/selected.png" width="30px" />
					</div>

					<div style="width: 100%; height: 200px;">
						<br>
						
							<div>
								<div style="margin-left: 15px; line-height: 35px; font-size: 15px;">
									<b>影厅名称：</b> <input id= "ytname" type="text" style="width: 160px;height: 32px;"
										lay-verify="title" autocomplete="off" placeholder="请输入影厅名称">
								</div>
								<div id="cinema"
									style="width: 160px; margin-top: 10px; margin-left: 15px; line-height: 35px; font-size: 15px;">
									
									
								</div>
							</div>
						<br>
						<div style="width: 100%; height: 80px; text-align: center;">
							<button type="button" class="layui-btn layui-btn-radius"
								onclick="init()">刷新布局</button>
							<br>
							<button type="button"
								class="layui-btn layui-btn-warm layui-btn-radius"
								style="margin-top: 10px" onclick="add()">确认添加</button>
						</div>

					</div>

					<script src="layui/layui.all.js"></script>
					<script>
						layui.use('element', function() {
							var element = layui.element;

							//一些事件监听
							element.on('tab(demo)', function(data) {
								console.log(data);
							});
						});
					</script>
					<script src="layui/layui.js" charset="utf-8"></script>
					<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
					<script>
	
						layui
								.use(
										[ 'form', 'layedit', 'laydate' ],
										function() {
											var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
										});
					</script>

					<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
					<script type="text/javascript">
						$(function() {
							init();
							showCenima();
						});
						
						var seatArray;
						
						function init() {
							seatArray = new Array();
							var row = $("#row option:selected").val();
							var col = $("#col option:selected").val();
							//-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
							for (var i = 0; i < row; i++) { //一维数组长度为10  
								seatArray[i] = new Array();
								for (var j = 0; j < col; j++) { //第二维长度为20  
									seatArray[i][j] = 0;
								}
							}
							var content1 = '';
							for (var v = 0; v < row; v++) {
								content1 += '<ul>';
								for (var i = 0; i < col; i++) {
									if (seatArray[v][i] == 0) {
										content1 += '<li id="'+ v+ '_'+ i+ '" onclick="change('+ v+ ','
												+i+ ')"><img src="images/unselected.png"/></li>';
									} else if (seatArray[v][i] == -1) {
										content1 += '<li id="'+ v+ '_'+ i+ '" onclick="change('+ v+ ','+ i+ ')"><img src="images/selected.png"/></li>';
									}
								}
								content1 += '</ul>';
							}
							$('#seats').html(content1)
						}
						
						function showCenima(){
							$.ajax({
								url:"/movie/cinema",
								type:"get",
								success:function(data){
									var content='<b>选择分院：</b><select id="cselect" name="cinema" style="height: 32px;display:block;"><option value="">请选择</option>';
									for(var i=0;i<data.length;i++){
										content+='<option value="'+data[i].yid+'">'+data[i].yname+'</option>';
									}
									content+='</select>';
									$("#cinema").html(content);
			    				}
							});
						}
						
						function change(r, c) {
							var id = '#' + r + '_' + c;
							// 如果可选则更新状态
							if (seatArray[r][c] == 0) {
								seatArray[r][c] = -1; //更新自己选定的数组位置状态 
								$(id).html('<img src="images/selected.png"/>');
							} else if (seatArray[r][c] == -1) {
								seatArray[r][c] = 0; //更新自己选定的数组位置状态
								$(id).html('<img src="images/unselected.png"/>');
							} else {
								alert("作为已被占或不存在该座位！");
							}
						}
						
 						function add(){
							var seats = JSON.stringify(seatArray);
							var yid = $("#cselect option:selected").val();
							var ytname = $("#ytname").val();
							if(yid=="" || ytname==""){
								alert("信息不能为空！");
							}else{
								$.ajax({
									url:"/movie/hall",
									type:"post",
									data:{
										yid:yid,
										ytname:ytname,
										ytlayout:seats
									},
									success:function(data){
										alert(data);
				    				}
								});	
							}
						} 
					</script>
</body>
</html>
